<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, defineExpose } from 'vue'
import { currentFun, constfunction, getDataFromLocalStorage, transformDataOptimized, processFirstItem } from "@/utils/utils.ts"
import request from '@/utils/request'
defineProps<{ msg: string }>()

const biapValue = ref(['wendu', 'huguang', 'chaoshenbo', 'yangan'])

// 3台柜子 环境温度数据
const chartDom1 = ref(null);
const chartDom2 = ref(null);
const chartDom3 = ref(null);
const chartDom4 = ref(null);
// --------------->
const chartDom11 = ref(null);
const chartDom22 = ref(null);
const chartDom33 = ref(null);
const chartDom44 = ref(null);
// --------------->
const chartDom111 = ref(null);
const chartDom222 = ref(null);
const chartDom333 = ref(null);
const chartDom444 = ref(null);



let wenduNew = ref([]) // 温度数据
let huguangNew = ref([]) // 弧光数据
let jufangNew = ref([]) // 局放超声波数据   
let yanganNew = ref([]) // 烟感数据

const huanJinBom1 = reactive({
  name: "温度",
  unit: '℃',
  typeColor: '#f3c249',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199", "rgba(225, 225, 239", "rgba(59, 202, 245", "rgba(59, 135, 207", "rgba(243, 107, 26", "rgba(36, 98, 255", "rgba(228, 161, 250"]

});
const huanJinBom2 = reactive({
  name: "弧光",
  unit: 'V',
  typeColor: '#f3c249',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199", "rgba(225, 225, 239", "rgba(59, 202, 245", "rgba(59, 135, 207", "rgba(243, 107, 26", "rgba(36, 98, 255", "rgba(228, 161, 250"]

});
const huanJinBom3 = reactive({
  name: "局放超声波",
  unit: 'Hz',
  typeColor: '#62cf41',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199", "rgba(225, 225, 239", "rgba(59, 202, 245", "rgba(59, 135, 207", "rgba(243, 107, 26", "rgba(36, 98, 255", "rgba(228, 161, 250"]

});
const huanJinBom4 = reactive({
  name: "烟感",
  unit: 'Lux ',
  typeColor: '#62cf41',
  barColor: ["rgba(51, 86, 206", "rgba(28, 214, 108", "rgba(249, 226, 50", "rgba(218, 42, 77", "rgba(243, 107, 26", "rgba(248, 223, 44", "rgba(79, 202, 203", "rgba(84, 102, 237", "rgba(101, 34, 199", "rgba(225, 225, 239", "rgba(59, 202, 245", "rgba(59, 135, 207", "rgba(243, 107, 26", "rgba(36, 98, 255", "rgba(228, 161, 250"]
});


// 子组件传递父组件
const emit = defineEmits(['getValue'])
const transValue = (isZ: boolean) => {
  emit("getValue", isZ)
}

// 接受父组件传过来的值 （父传子）
const childMethod = () => {
  getSpatial()
  getZiWaiXian()
  getChaoShenBo()
  getYanGan()
};
// 暴露方法，使得父组件可以调用
defineExpose({
  childMethod
});







// 空间参数 - 温度
const getSpatial = async () => {
  try {
    const data = await request.post('/media/getSpatial', getDataFromLocalStorage())
    wenduNew.value = data.data
    await nextTick()
    
    // 3台柜子 处理温度数据
    if (wenduNew.value[0] && chartDom1.value) {
      await currentFun(chartDom1, huanJinBom1, constfunction(processFirstItem(wenduNew.value[0], 'delete')), wenduNew.value[0][0].name)
    }
    if (wenduNew.value[1] && chartDom11.value) {
      await currentFun(chartDom11, huanJinBom1, constfunction(processFirstItem(wenduNew.value[1], 'delete')), wenduNew.value[1][0].name)
    }
    if (wenduNew.value[2] && chartDom111.value) {
      await currentFun(chartDom111, huanJinBom1, constfunction(processFirstItem(wenduNew.value[2], 'delete')), wenduNew.value[2][0].name)
    }
  } catch (error) {
    console.error('Error in getSpatial:', error)
  }
}
// 空间参数 - 弧光
const getZiWaiXian = async () => {
  try {
    const data = await request.post('/media/getZiWaiXian', getDataFromLocalStorage())
    huguangNew.value = data.data
    await nextTick()
    
    // 3台柜子 处理弧光数据
    if (huguangNew.value[0] && chartDom2.value) {
      await currentFun(chartDom2, huanJinBom2, transformDataOptimized(processFirstItem(huguangNew.value[0], 'delete')), huguangNew.value[0][0].name)
    }
    if (huguangNew.value[1] && chartDom22.value) {
      await currentFun(chartDom22, huanJinBom2, transformDataOptimized(processFirstItem(huguangNew.value[1], 'delete')), huguangNew.value[1][0].name)
    }
    if (huguangNew.value[2] && chartDom222.value) {
      await currentFun(chartDom222, huanJinBom2, transformDataOptimized(processFirstItem(huguangNew.value[2], 'delete')), huguangNew.value[2][0].name)
    }
  } catch (error) {
    console.error('Error in getZiWaiXian:', error)
  }
}
// 空间参数 - 超声波
const getChaoShenBo = async () => {
  try {
    const data = await request.post('/media/getChaoShenBo', getDataFromLocalStorage())
    jufangNew.value = data.data
    await nextTick()
    
    //  3台柜子 处理超声波数据
    if (jufangNew.value[0] && chartDom3.value) {
      await currentFun(chartDom3, huanJinBom3, transformDataOptimized(processFirstItem(jufangNew.value[0], 'delete')), jufangNew.value[0][0].name)
    }
    if (jufangNew.value[1] && chartDom33.value) {
      await currentFun(chartDom33, huanJinBom3, transformDataOptimized(processFirstItem(jufangNew.value[1], 'delete')), jufangNew.value[1][0].name)
    }
    if (jufangNew.value[2] && chartDom333.value) {
      await currentFun(chartDom333, huanJinBom3, transformDataOptimized(processFirstItem(jufangNew.value[2], 'delete')), jufangNew.value[2][0].name)
    }
  } catch (error) {
    console.error('Error in getChaoShenBo:', error)
  }
}
// 空间参数 - 烟感  
const getYanGan = async () => {
  try {
    const data = await request.post('/media/getYanGan', getDataFromLocalStorage())
    yanganNew.value = data.data
    await nextTick()
    
    // 3台柜子 处理烟感数据
    if (yanganNew.value[0] && chartDom4.value) {
      await currentFun(chartDom4, huanJinBom4, constfunction(processFirstItem(yanganNew.value[0], 'delete')), yanganNew.value[0][0].name)
    }
    if (yanganNew.value[1] && chartDom44.value) {
      await currentFun(chartDom44, huanJinBom4, constfunction(processFirstItem(yanganNew.value[1], 'delete')), yanganNew.value[1][0].name)
    }
    if (yanganNew.value[2] && chartDom444.value) {
      await currentFun(chartDom444, huanJinBom4, constfunction(processFirstItem(yanganNew.value[2], 'delete')), yanganNew.value[2][0].name)
    }
  } catch (error) {
    console.error('Error in getYanGan:', error)
  }
}


const wendu = ref(true)
const huguang = ref(true)
const chaoshengbo = ref(true)
const yangan = ref(true)


// 3台柜子 定义参数与对应变量和函数的映射
const paramConfig = {
  wendu: {
    value: wendu,
    chartDoms: [chartDom1, chartDom11, chartDom111],
    huanJinBom: huanJinBom1
  },
  huguang: {
    value: huguang,
    chartDoms: [chartDom2, chartDom22, chartDom222],
    huanJinBom: huanJinBom2
  },
  chaoshenbo: {
    value: chaoshengbo,
    chartDoms: [chartDom3, chartDom33, chartDom333],
    huanJinBom: huanJinBom3
  },
  yangan: {
    value: yangan,
    chartDoms: [chartDom4, chartDom44, chartDom444],
    huanJinBom: huanJinBom4
  }
};


// 主函数
const changBox = async (par: string[]) => {
  // 先处理隐藏的图表
  Object.keys(paramConfig).forEach((key) => {
    const config = paramConfig[key]
    if (!par.includes(key)) {
      config.value.value = false
    }   
  })

  // 等待 DOM 更新
  await nextTick()

  // 处理需要显示的图表
  for (const key of par) {
    const config = paramConfig[key]
    if (config) {
      config.value.value = true
      
      switch (key) {
        case 'wendu':
          // 如果没有数据或需要刷新数据
          if (!wenduNew.value.length) {
            await getSpatial()
          }
          // 重新渲染所有温度图表
          for (let i = 0; i < wenduNew.value.length; i++) {
            const chartDom = config.chartDoms[i]
            if (wenduNew.value[i] && chartDom.value) {
              await nextTick() // 等待 DOM 更新
              await currentFun(
                chartDom,
                config.huanJinBom,
                constfunction(processFirstItem(wenduNew.value[i], 'delete')),
                wenduNew.value[i][0].name
              )
            }
          }
          break

        case 'huguang':
          if (!huguangNew.value.length) {
            await getZiWaiXian()
          }
          for (let i = 0; i < huguangNew.value.length; i++) {
            const chartDom = config.chartDoms[i]
            if (huguangNew.value[i] && chartDom.value) {
              await nextTick()
              await currentFun(
                chartDom,
                config.huanJinBom,
                transformDataOptimized(processFirstItem(huguangNew.value[i], 'delete')),
                huguangNew.value[i][0].name
              )
            }
          }
          break

        case 'chaoshenbo':
          if (!jufangNew.value.length) {
            await getChaoShenBo()
          }
          for (let i = 0; i < jufangNew.value.length; i++) {
            const chartDom = config.chartDoms[i]
            if (jufangNew.value[i] && chartDom.value) {
              await nextTick()
              await currentFun(
                chartDom,
                config.huanJinBom,
                transformDataOptimized(processFirstItem(jufangNew.value[i], 'delete')),
                jufangNew.value[i][0].name
              )
            }
          }
          break

        case 'yangan':
          if (!yanganNew.value.length) {
            await getYanGan()
          }
          for (let i = 0; i < yanganNew.value.length; i++) {
            const chartDom = config.chartDoms[i]
            if (yanganNew.value[i] && chartDom.value) {
              await nextTick()
              await currentFun(
                chartDom,
                config.huanJinBom,
                constfunction(processFirstItem(yanganNew.value[i], 'delete')),
                yanganNew.value[i][0].name
              )
            }
          }
          break
      }
    }
  }
}



onMounted(async () => {
  if(getDataFromLocalStorage()){
    // 初始化时加载所有数据
      await Promise.all([
        getSpatial(),
        getZiWaiXian(),
        getChaoShenBo(),
        getYanGan()
      ])
  }
  

  // 初始化时渲染选中的图表
  await changBox(biapValue.value)
})

</script>
<template>
  <div class="h-max">
    <div class="biaoshi">
      <el-checkbox-group v-model="biapValue" @change="changBox">
        <el-checkbox label="溫度" value="wendu" size="large"  />
        <el-checkbox label="弧光" value="huguang" size="large"  />
        <el-checkbox label="局放超聲波" value="chaoshenbo" size="large"  />
        <el-checkbox label="烟感" value="yangan" size="large"  />
      </el-checkbox-group>
    </div>
    <!-- 3台柜子 -->
    <!-- 溫度 -->
    <div class="maxBox" v-show="wendu && wenduNew[0]">
      <div ref="chartDom1" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="wendu && wenduNew[1]">
      <div ref="chartDom11" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="wendu && wenduNew[2]">
      <div ref="chartDom111" class="chartDomLei"></div>
    </div>
    <!-- 弧光 -->
    <div class="maxBox" v-show="huguang && huguangNew[0]">
      <div ref="chartDom2" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="huguang && huguangNew[1]">
      <div ref="chartDom22" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="huguang && huguangNew[2]">
      <div ref="chartDom222" class="chartDomLei"></div>
    </div>
    <!-- 局放超聲波 -->
    <div class="maxBox" v-show="chaoshengbo && jufangNew[0]">
      <div ref="chartDom3" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="chaoshengbo && jufangNew[1]">
      <div ref="chartDom33" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="chaoshengbo && jufangNew[2]">
      <div ref="chartDom333" class="chartDomLei"></div>
    </div>
    <!-- 烟感  -->
    <div class="maxBox" v-show="yangan && yanganNew[0]">
      <div ref="chartDom4" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="yangan && yanganNew[1]">
      <div ref="chartDom44" class="chartDomLei"></div>
    </div>
    <div class="maxBox" v-show="yangan && yanganNew[2]">
      <div ref="chartDom444" class="chartDomLei"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.h-max {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;

  .biaoshi {
    width: 1750px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    :deep(.el-checkbox-group) .el-checkbox {
      margin-right: 15px;
    }

    .colorItem {
      // width: 120px; 
      height: 40px;
      padding-right: 30px;
      // border: 1px solid #ffffff;
      display: flex;
      align-items: center;

      .colorItem-color {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        // background-color: #ffffff;
        margin-right: 20px;
      }

      .colorItem-text {}
    }
  }

  .maxBox {
    // padding: 15px;
    padding-left: 0;
    padding-bottom: 30px;
    padding-right: 30px;
    box-sizing: border-box;
    // border: 1px solid #ffffff;/

    .chartDomLei {
      // border: 1px solid #ffffff;  
      width: 860px;
      height: 420px;
    }
  }

}
</style>
